<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>账单</title>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <link rel="stylesheet" href="plugins/aui-20170109-v2/css/aui.css" type="text/css"/>
    <link rel="stylesheet" href="css/bill.css" type="text/css"/>
    <link rel="stylesheet" href="plugins/Font-Awesome-3.2.1/css/font-awesome.min.css" type="text/css"/>
    <script src="jquery/jquery.min.js"></script>
    <script src="jquery/bill.js"></script>
</head>
<body>
<!--头部开始-->
<header class="aui-bar aui-bar-nav">
    <a class="aui-pull-left aui-btn">
        <span class="aui-iconfont aui-icon-left"></span>朋友
    </a>
    <div class="aui-title">服务提醒</div>
    <p class="aui-bar-nav-right">
        <img src="img/bill-img/zd_03.jpg">
        <img src="img/shh-02.jpg">
    </p>
</header>
<!--头部结束-->
<!--筛选 分类开始-->
<div class="classification">
    <div class="left">
        <div class="screen">
            <span>筛选</span>
            <i class=" icon-sort-down"></i>
        </div>
        <div class="assortment">
            <span>分类</span>
            <i class=" icon-sort-down"></i>
        </div>
    </div>
    <div class="right">
        <p></p>
        <a>搜索</a>
    </div>
</div>
<!--筛选 分类结束-->
<!--快捷筛选 start-->
<div class="quick-screening">
    <p class="quick-screening-text">快捷筛选</p>
    <div class="quick-screening-list">
        <ul>
            <li>网购<img src="img/bill-img/back.gif"></li>
            <li>线下消费<img src="img/bill-img/back.gif"></li>
            <li>理财<img src="img/bill-img/back.gif"></li>
        </ul>
        <ul>
            <li>转账<img src="img/bill-img/back.gif"></li>
            <li>提现<img src="img/bill-img/back.gif"></li>
            <li>红包<img src="img/bill-img/back.gif"></li>
        </ul>
        <ul>
            <li>还款<img src="img/bill-img/back.gif"></li>
            <li>缴费<img src="img/bill-img/back.gif"></li>
            <li>手机充值<img src="img/bill-img/back.gif"></li>
        </ul>
        <ul>
            <li>有还款<img src="img/bill-img/back.gif"></li>
            <li class="empty"></li>
            <li class="empty"></li>
        </ul>
    </div>
    <p>金额</p>
    <div class="money-list">
        <ul>
            <li><input placeholder="最低金额"><span>￥</span></li>
            <li><input placeholder="最高金额"><span>￥</span></li>
        </ul>
    </div>
    <p>标签</p>
    <div class="label-box">
        <div>你还没有添加过标签</div>
        <div>添加后，可按照标签筛选和统计账单</div>
    </div>
    <div class="but-box">
        <button>重置</button>
        <button>确定</button>
    </div>
</div>
<!--快捷筛选 end-->
<!--分类 start-->
<div class="classify-box">
    <div class="all">
        <i class=" icon-th-large"></i>
        <p>全部</p>
    </div>
    <p class="subtitle">消费</p>
    <div class="classify-box-list">
        <ul>
            <li><i class=" icon-shopping-cart"></i><p>全部消费</p></li>
            <li><i class="icon-food"></i><p>饮食</p></li>
            <li><i  class="icon-food"></i><p>服饰美容</p></li>
            <li><i  class="icon-food"></i><p>生活日用</p></li>
            <li><i  class="icon-food"></i><p>住房缴费</p></li>
        </ul>
        <ul>
            <li><i class=" icon-food"></i><p>交通出行</p></li>
            <li><i class="icon-food"></i><p>通讯物流</p></li>
            <li><i  class="icon-food"></i><p>文教娱乐</p></li>
            <li><i  class="icon-food"></i><p>健康</p></li>
            <li><i  class="icon-food"></i><p>其他消费</p></li>
        </ul>
    </div>
    <p class="subtitle">更多</p>
    <div>
        <ul>
            <li><i class=" icon-food"></i><p>理财</p></li>
            <li><i class="icon-food"></i><p>保险</p></li>
            <li><i  class="icon-food"></i><p>借还款</p></li>
            <li><i  class="icon-food"></i><p>人情往来</p></li>
            <li><i  class="icon-food"></i><p>公益</p></li>
        </ul>
        <ul>
            <li><i class=" icon-food"></i><p>小买卖</p></li>
            <li><i class="icon-food"></i><p>酬劳</p></li>
            <li><i  class="icon-food"></i><p>奖金</p></li>
            <li><i  class="icon-food"></i><p>其他</p></li>
            <li><i></i><p></p></li>
        </ul>
    </div>
</div>
<!--分类 end-->
<!--本月支出收入开始-->
<div class="bill">
    <div class="left">
       <div>本月</div>
        <div>
            <span>支出</span>
            <span>￥487.16</span>
            <span>收入</span>
            <span>￥20</span>
        </div>
    </div>
    <div class="right">
        <img src="img/bill-img/zd_11.jpg">
    </div>
</div>
<!--本月支出收入结束-->
<!--账单开始-->
<div class="aui-content aui-margin-b-15">
    <ul class="aui-list aui-list-in">
        <li class="aui-list-item">
            <div class="left">
               <img src="img/bill-img/zd_15.jpg">
            </div>
            <div class="right">
                <div class="aui-list-item-title">
                    <p>滴滴开车-张三师傅</p>
                    <p>[交通出现]</p>
                    <div>
                        <span>今天</span>
                        <span>08：30</span>
                    </div>
                </div>
                <div class="price">
                    -7.00
                </div>
            </div>
        </li>
        <li class="aui-list-item">
            <div class="left">
                <img src="img/bill-img/zd_19.jpg">
            </div>
            <div class="right">
                <div class="aui-list-item-title">
                    <p>余额提现</p>
                    <p>[其他]</p>
                    <div>
                        <span>04-10</span>
                        <span>17:50</span>
                    </div>
                </div>
                <div class="price">
                   1500.00
                </div>
            </div>
        </li>
        <li class="aui-list-item">
            <div class="left">
                <img src="img/bill-img/zd_22.jpg">
            </div>
            <div class="right">
                <div class="aui-list-item-title">
                    <p>1019100086</p>
                    <p>[服饰美容]</p>
                    <div>
                        <span>04-09</span>
                        <span>23：28</span>
                    </div>
                </div>
                <div class="price">
                   -376.92
                </div>
            </div>
        </li>
        <li class="aui-list-item">
            <div class="left">
                <img src="img/bill-img/zd_25.jpg">
            </div>
            <div class="right">
                <div class="aui-list-item-title">
                    <p>转账-快乐的哒</p>
                    <p>[其他]</p>
                    <div>
                        <span>04-08</span>
                        <span>10：36</span>
                    </div>
                </div>
                <div class="price add">
                   +1.00
                </div>
            </div>
        </li>
        <li class="aui-list-item">
            <div class="left">
                <img src="img/bill-img/zd_27.jpg">
            </div>
            <div class="right">
                <div class="aui-list-item-title">
                    <p>火车票</p>
                    <p>[交通出行]</p>
                    <div>
                        <span>04-07</span>
                        <span>13：12</span>
                    </div>
                </div>
                <div class="price">
                    -25.00
                </div>
            </div>
        </li>
    </ul>
</div>
<!--账单结束-->
</body>
</html>